/**
 * Created by 居胜 on 2016/6/30.
 */
+function () {
    //选择器
    var $$ = function (selector) {
        return document.querySelector(selector);
    };

    //获取元素节点
    var wrapDiv = $$('.container');
    var ul = $$('.container ul');
    var li_s = ul.children;
    var img_s = ul.getElementsByTagName('img');
    var btn_s = $$('.btn').children;

    //当前按钮位置
    var btn_index = 0;
    //当前图片位置
    var img_index = 0;

    //图片宽度
    var imgWidth = 1920;
    ul.style.width = 1920 * li_s.length + 'px';

    //屏幕居中自适应
    function resize() {
        //视口宽度
        var viewWidth = document.documentElement.clientWidth;
        if(viewWidth >= 800){
            for(var i = 0; i < img_s.length; i++){
                img_s[i].style.left = -(imgWidth - viewWidth)/2 + 'px';
            }
        }
    }
    resize();
    window.onresize = resize;

    //图片切换按钮
    for(var i = 0; i < btn_s.length; i++){
        btn_s[i].index = i;
        btn_s[i].onclick = function () {
            for(var i = 0; i < btn_s.length; i++){
                btn_s[i].className = '';
            }
            this.className = 'active';
            ul.style.left = -(imgWidth * this.index) + 'px';
        }
    }

    //定时自动切换
    setInterval(change, 3000);
    function change() {

        //到达最后一个
        if(btn_index == btn_s.length-1){
            //无缝切换_1
            li_s[0].style.position = "relative";
            li_s[0].style.left = li_s.length * imgWidth + 'px';
            btn_index = 0;
        }else{
            btn_index++;
        }

        //图片位置+1
        img_index++;

        //改变切换按钮状态
        for(var i = 0; i < btn_s.length; i++){
            btn_s[i].className = '';
        }
        btn_s[btn_index].className = 'active';

        //图片切换
        $('.container ul').animate({left:-(img_index * imgWidth) +'px'}, function () {
            //无缝切换——2
            if(btn_index == 0){
                li_s[0].style.position = 'static';
                ul.style.left = 0;
                img_index = 0;
            }
        });

    }

    //导航条点击效果
    var links = $(".top_bar a");
    for(var i = 0; i<links.length; i++){
        links[i].index = i;

        links[i].onclick = function () {
            for(var j = 0; j<links.length; j++) {
                $(links[j]).removeClass('active');
            }
            $(this).addClass('active');
        }
    }
    
    //新闻滚动
    var news = $$('#news_ul');
    var news_list = news.children;

    //定时轮播新闻
    var news_timer = setInterval(change_new, 3000);
    var sliderNum = 1;
    function change_new() {
        //复制当前显示的节点到末尾
        for(var i = 0; i < sliderNum; i++){
            var tempLi = news_list[i].cloneNode(true);
            news.appendChild(tempLi);
        }

        //移动后，回调函数删除前面的节点
        $('#news_ul').animate({marginTop:-60 +'px'}, function () {
            for(var j = 0; j < sliderNum; j++){
                news.removeChild(news_list[0]);
            }
            news.style.marginTop = '0px';
        });

    }
    var box = document.getElementById('news');
    var news_last = box.getElementsByClassName('last')[0];
    var news_next = box.getElementsByClassName('next')[0];

    news_last.onclick = function (event) {
        event.preventDefault();
    }
    news_next.onclick = function (event) {
        event.preventDefault();
    }

}(window.jQuery);